<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><button onclick="myFunction21()">介绍</button></li>
        <li><button onclick="myFunction22()">介绍</button></li>
        <li><button>介绍</button></li>
    </ul>
    <iframe id="iframe2" src="yemian2-1.html" loading="lazy" width="800" height="700" frameborder="0">

    </iframe>
    <script>
         var iframe2 = document.getElementById("iframe2");
        function myFunction22(){
                iframe2.src="yemian2-2.html";
        }
        function myFunction21(){
            iframe2.src="yemian2-1.html";
        }
       

    </script>
</body>
<style>
    ul li{
        list-style: none;
        float: left;
        background-color:white;
        width: 150px;
        height: 80px;
       
        margin-top: 5px;
        margin-right: 20px;
        text-align: center;
        border-bottom: 2px solid gray; 
        
    }
    ul li:hover{
        border-bottom: 5px solid #2f7cee; 
        
    }
    ul li button{
        display: block;
        height: 50px;
        width: 150px;
        margin-top: 30px;
        border: none;
        background-color: #fff;
    
    }
    ul li button:hover{
        cursor: pointer;
    }
</style>
</html>